import { Spin } from 'antd';
import "./index.css"
import { createRoot } from "react-dom/client"
const Loading = (props) => {
    let { visible, indicator = null, tip = '加载中...', size = 'large' } = props;
    //创建一个元素
    let loadingEl = document.createElement('div')
    //添加id
    loadingEl.id = 'loadingRoot'

    //关闭的方法
    function close() {
        // visible为false的情况下 移除
        let loadingRoot = document.querySelector('#loadingRoot');
        if (loadingRoot) {
            document.body.removeChild(loadingRoot);
        }
    }

    // 封装ant的加载动画
    let SpinCom = indicator ? (<Spin className='spin' indicator={indicator} size={size} tip={tip}>
    </Spin>) : (<Spin className='spin' size={size} tip={tip}>
    </Spin>)


    if (visible) {
        //判断页面上有没有loadingRoot这个元素
        let loadingRoot = document.querySelector('#loadingRoot')
        if (!loadingRoot) {
            //将创建的元素添加到页面上
            document.body.appendChild(loadingEl)
            //react元素
            let reactNode = (
                <div className="loading">
                    {SpinCom}
                </div>
            )
            //创建渲染容器
            let r = createRoot(loadingEl)
            //渲染的方法
            r.render(reactNode)
        }
    } else {
        close()
    }

    return close
}


export default Loading